<template>
    <el-card class="card">
        <span>系统公告</span>
        <el-form>
            <el-form-item label="发布日期">
                <el-col span="6">
                    <DatePicker></DatePicker>
                </el-col>
                <el-col span="6">
                    <el-autocomplete style="margin-left: 20px;width: 300px;line-height: 55px; height: 50px;"
                        v-model="articleList.searchKey" :fetch-suggestions="querySearch" popper-class="my-autocomplete"
                        placeholder="请输入关键字" @select="handleSelect">
                        <template #suffix>
                            <el-icon @click="handleIconClick">
                                <Search />
                            </el-icon>
                            &nbsp;&nbsp;
                            <el-icon @click="cancelIconClick">
                                <Close />
                            </el-icon>
                        </template>
                    </el-autocomplete>
                </el-col>
                <el-col span="6" style="margin-left: 15%;">
                    <el-button @click="publishText" style="width: 120px;height:50px;border-radius: 20px;"
                        type="primary">新增系统公告</el-button>
                    <el-button style="width: 120px;height:50px;border-radius: 20px;" @click="exportXlsx">导出</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="allAnnouncementList.result" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column label="消息标题" prop="title" width="150px"></el-table-column>
            <el-table-column property="content" label="消息内容" width="400" />
            <el-table-column property="publisher" label="发布人" show-overflow-tooltip />
            <el-table-column property="status" label="状态" show-overflow-tooltip>
                <template #default="scope">
                    <el-switch @click="changeFlag(scope.row)" v-model="scope.row.status" width="60" inline-prompt
                        active-text="启动" inactive-text="禁用" />
                </template>
            </el-table-column>
            <el-table-column property="updateTime" label="操作时间" show-overflow-tooltip />
            <el-table-column label="操作" show-overflow-tooltip>
                <template #default="scope">
                    <el-button type="primary" link @click="editArticleList(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="deleteArticleList(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination :list="articleList" :res="allAnnouncementList" @changeCount="changeCount" @changePage="changePage" />

    </el-card>
</template>
  
<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue'
import api from '@/api'
import { LabelSearchType, LabelReaultType, updateStatusType } from '@/types/ccc/lable'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import DatePicker from '../ccc/DatePicker.vue';
import * as XLSX from "xlsx";
import Pagination from '../ccc/Pagination.vue'
const router = useRouter()
const publishText = () => {
    router.push('xtgg/addAnnouncement')
}
const articleList = reactive<LabelSearchType>({
    searchKey: '',
    page: 1,
    count: 10
})
const allAnnouncementList = reactive<LabelReaultType>({
    total: 0,
    totalPage: 0,
    result: []
})
const getAllAnnouncement = async () => {
    const result = await api.systemSetting.announcement.getAllAnnouncementApi(articleList)
    console.log(result.data.data);
    allAnnouncementList.result = result.data.data.result
    result.data.data.result.forEach((item:any) => {
        if (item.status) {
            item.status = true
        } else {
            item.status = false
        }

    });
    allAnnouncementList.total = result.data.data.total
    allAnnouncementList.totalPage = result.data.data.totalPage
}
onMounted(() => {
    getAllAnnouncement()
})
// 修改状态
const status = reactive<updateStatusType>({
    id: '',
    status: 0
})
const changeFlag = async (item: any) => {
    console.log(item);
    status.id = item.id

    if (item.status) {
        // 1
        item.status = 1
        status.status = item.status
    } else {
        // 0 
        item.status = 0
        status.status = item.status
    }
    console.log(status);
    const result = await api.systemSetting.announcement.updateAnnouncementStatusByIdApi(status)
    console.log(result.data);
    if (result.data.code === 200) {
        ElMessage.success(result.data.msg)
    } else {
        ElMessage.warning(result.data.msg)
    }
    getAllAnnouncement()

}
const editArticleList = async (item: any) => {
    console.log(item);
    item = JSON.stringify(item)
    localStorage.setItem('item', item)
    router.push('xtgg/editAnnouncement')

    //const result=await api.systemSetting.article.getAllArticleApi()
}
const deleteArticleList = async (id: number) => {
    console.log(id);
    const result = await api.systemSetting.announcement.delAnnouncementByIdApi(id)
    console.log(result);
    if (result.data.code === 200) {
        ElMessage.success(result.data.msg)

    } else {
        ElMessage.warning(result.data.msg)

    }
    getAllAnnouncement()
}
const exportXlsx = () => {
    const data = XLSX.utils.json_to_sheet(allAnnouncementList.result)//此处res.result为表格的数据
    const wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为定义的表格中表头名
    XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名
}




interface LinkItem {
    value: string
    link: string
}

const links = ref<LinkItem[]>([])

const querySearch = (queryString: string, cb: any) => {
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value
    // call callback function to return suggestion objects
    cb(results)
}
const createFilter = (queryString: any) => {
    return (restaurant: any) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}

const handleSelect = (item: LinkItem) => {
    console.log(item)
}

const handleIconClick = (ev: Event) => {
    console.log(ev)
    console.log(articleList.searchKey);
    getAllAnnouncement()

}
const cancelIconClick = () => {
    articleList.searchKey = ''
    getAllAnnouncement()


}
// 修改当前页数
const changeCount = (arg: number) => {
    articleList.count = arg
    getAllAnnouncement()

}
// 修改当前页数
const changePage = (arg: number) => {
    articleList.page = arg
    getAllAnnouncement()
}

</script>
  
<style lang='scss' scoped>
.card {
    width: 1150px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    min-height: 100vh;
}

</style>